<template>
    <div class="wbh-item">
        <div class="wbh-item__inner">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue'

const wbhRef = inject('wbh')
const wbhItemRef = ref()

const moveHandler = (e) => {
    for (const card of wbhItemRef.value) {
        const rect = card.getBoundingClientRect()
        const x = e.clientX - rect.left - rect.width / 2
        const y = e.clientY - rect.top - rect.height / 2
        card.style.setProperty('--x', `${x}px`)
        card.style.setProperty('--y', `${y}px`)
    }
}

onMounted(() => {
    wbhItemRef.value = wbhRef.value.children
    wbhRef.value && wbhRef.value.addEventListener('mousemove', moveHandler)
})
</script>

<style lang="scss" scoped>
.wbh-item {
    min-height: 100px;
    position: relative;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 2px;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(closest-side circle, #fff, transparent);
        transform: translate(var(--x, -1000px), var(--y, -1000px));
    }

    .wbh-item__inner {
        border-radius: 8px;
        position: relative;
        height: 100%;
        background: #222;
    }
}
</style>